﻿<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="Shortcut Icon" href="../images/aecc.ico" type="image/x-icon" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../StaticFiles/element-ui/element-ui.css">
  <link rel="stylesheet" href="../StaticFiles/nprogress/nprogress.min.css">
  <link rel="stylesheet" href="../styles/vue-page-common.css">
  <script src="../Scripts/vue.min.js"></script>
  <script src="../StaticFiles/element-ui/element-ui.js"></script>
  <script src="../Scripts/axios.min.js"></script>
  <script src="../StaticFiles/nprogress/nprogress.min.js"></script>
  <script src="../Scripts/axios.config.js"></script>
  <script src="../Scripts/dayjs.min.js"></script>
  <script src="../Scripts/datav.min.vue.js"></script>
  <title>问题快反看板</title>
  <style>
    .el-progress__text {
      font-size: 14px !important;
      font-weight: bold;
    }

    .el-empty {
      padding: 0 !important;
    }

    .chart {
      height: 307px;
      border: 1px solid #409EFF;
      margin: 10px;
    }

    .dv-scroll-board .row-item {
      color: #606266;
    }

    .dv-scroll-board .index {
      color: #fff;
    }

    #mainTable .el-table .el-table__cell {
      padding: 5px 0px;
    }

    .el-form-item {
      margin-bottom: 18px;
    }

    .el-cascader-menu__wrap {
      height: 500px;
    }

    .el-popover__reference-wrapper {
      text-align: center;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak v-on:keyup.enter="getData">
    <el-row class="header">
      <el-col :span="6"><img src="../images/aeec_logo.png" height="60" alt="黎阳LOGO" /></el-col>
      <el-col :span="12" class="header-title">问题快反看板</el-col>
      <el-col :span="6" class="currentTime">{{currentTime}}</el-col>
    </el-row>
    <el-row>
      <!-- 左侧 -->
      <el-col :span="19">
        <!-- 查询条件区 -->
        <el-form :inline="true" :model="queryInfo" ref="queryInfoRef" style="margin: 10px" :label-position="'left'"
          :rules="rules">
          <el-form-item label="提出单位" prop="createorg">
            <el-cascader :options="orginazition" :props="{ checkStrictly: true}" ref="orginazitionRef"
              v-model="queryInfo.fromOrg" clearable style="width:450px;">
            </el-cascader>
          </el-form-item>
          <el-form-item label="处理单位" prop="dealorg">
            <el-cascader :options="orginazition" :props="{ checkStrictly: true}" ref="orginazitionRef"
              v-model="queryInfo.toOrg" clearable style="width:450px;">
            </el-cascader>
          </el-form-item>
          <el-form-item label="与本人相关">
            <el-switch v-model="queryInfo.self" active-text="是" inactive-text="否">
            </el-switch>
          </el-form-item>

          <el-form-item label="是否定时刷新">
            <el-switch v-model="isRefresh" active-text="是" inactive-text="否">
            </el-switch>
          </el-form-item>

          <el-form-item label="问题分类">
            <el-input v-model.trim="queryInfo.feedbackType" placeholder="请输入问题分类" clearable></el-input>
          </el-form-item>

          <el-form-item prop='createuser' label="提出人">
            <el-autocomplete v-model.trim="queryInfo.createuser" placeholder="请输入提出人" :trigger-on-focus="false"
              style="width:130px;" :fetch-suggestions="searchFullnameAsync" :value-key="'username'" :debounce="500">
            </el-autocomplete>
          </el-form-item>

          <el-form-item prop='dealperson' label="待办人">
            <el-autocomplete v-model.trim="queryInfo.dealperson" placeholder="请输入待办人" :trigger-on-focus="false"
              style="width:130px;" :fetch-suggestions="searchFullnameAsync" :value-key="'username'" :debounce="500">
            </el-autocomplete>
          </el-form-item>

          <el-form-item label="提出时间" prop='createdate'>
            <el-date-picker v-model="queryInfo.createdate" type="daterange" range-separator="至"
              value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="处理状态">
            <el-select v-model="queryInfo.status" placeholder="请选择" clearable filterable style="width:123px;">
              <el-option :key="'处理中'" :label="'处理中'" :value="'处理中'">
              </el-option>
              <el-option :key="'已结束'" :label="'已结束'" :value="'已结束'">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="small" @click="handlerBtnSearch" :disabled="!isLegel">
              查询
            </el-button>
            <el-button type="primary" icon="el-icon-download" size="small" @click="getExportExcel">导出</el-button>

            <el-switch></el-switch>
          </el-form-item>
        </el-form>

        <!-- 表格 -->
        <el-table id="mainTable" v-loading="loading" v-loading.fullscreen.lock="loading" element-loading-text="数据加载中"
          element-loading-background="rgba(0,0,0,0.8)" :data="dataList" stripe border show-overflow-tooltip>
          <el-table-column type="index" width="40"></el-table-column>
          <el-table-column label="问题id" prop="id" v-if="false"></el-table-column>
          <el-table-column label="提出人/提出日期" width="280">
            <template slot-scope="scope">
              <div style="width: 100%;height: 100%;display: flex;">
                <el-image style="width:48px;height: 48px;" v-if="scope.row.createuserimageurl"
                  :src="scope.row.createuserimageurl" :preview-src-list="[scope.row.createuserimageurl]">
                </el-image>
                <el-image v-else style="width:48px;height: 48px;" :src="'../images/person_blue.png'"></el-image>
                <div style="flex:1;margin-left:5px;">
                  <div>
                    <div><strong>提出人: </strong> {{scope.row.fullname}}</div>
                    <div><strong>提出时间: </strong>{{scope.row.createdate.replace('T',' ')}}</div>
                    <div style="display:none"><strong>问题类型: </strong>{{scope.row.feedback_type}}</div>
                    <div style="display:none"><strong>流程实例id: </strong>{{scope.row.processinstid}}</div>
                  </div>
                </div>
            </template>
          </el-table-column>
          <el-table-column label="提出单位">
            <template slot-scope="scope">
              <span>{{scope.row.fromorginfo}}</span>
            </template>
          </el-table-column>
          <el-table-column label="问题描述">
            <template slot-scope="scope">
              {{scope.row.feedback_type}}：{{scope.row.problem_feedback_title}}
            </template>
          </el-table-column>
          <el-table-column label="处置用时" width="260">
            <template slot-scope="scope">
              <div style="font-size: 18px;">
                <strong>
                  <span v-if="scope.row.problem_status === '已关闭'">总耗时: </span>
                  <span v-else>已耗时: </span>
                </strong>
                {{scope.row.costtime}}
              </div>
              <div style="display:none">
                <strong>当前进度: </strong>
                <el-tag v-if="scope.row.problem_status==='已关闭'" :type="'info'">
                  已关闭
                </el-tag>
                <el-tag v-else="scope.row.problem_status==='已关闭'" :type="'danger'">
                  处理中
                </el-tag>
              </div>
              <!-- 进度条 -->
              </el-progress>
              <el-link type="primary" @click="showEditDialog(scope.row.id)"><i class="el-icon-s-grid"></i>节点回复
              </el-link>


              <el-link v-if="scope.row.problem_status === '已关闭'" type="info" disabled><i class="el-icon-lock"></i> 已关闭
              </el-link>

              <el-link v-if="scope.row.problem_status != '已关闭' && employeeid == scope.row.resemployeeid" type="success"
                target="_blank" :href='taskBaseUrl + scope.row.taskurl'><i class="el-icon-edit-outline"></i> 处理待办
              </el-link>

              <el-link v-if="scope.row.problem_status != '已关闭' && employeeid != scope.row.resemployeeid" type="primary"
                target="_blank" :href='(taskBaseUrl + scope.row.taskurl).replace("true", "false")'><i
                  class="el-icon-view"></i>
                查看待办
              </el-link>
            </template>
          </el-table-column>
          <el-table-column label="待办信息" width="310px">
            <template slot-scope="scope">
              <div v-if="scope.row.problem_status != '已关闭'" style="width: 100%;height: 100%;display: flex;">
                <div v-if="scope.row.daibanuserimageurl">
                  <el-image style="width:48px;height: 48px;" :src="scope.row.daibanuserimageurl"
                    :preview-src-list="[scope.row.daibanuserimageurl]">
                  </el-image>
                </div>
                <div v-else>
                  <el-image style="width:48px;height: 48px;" :src="'../images/person_blue.png'">
                  </el-image>
                </div>
                <div style="flex:1;margin-left:5px;">
                  <div><strong>待办人:</strong>{{scope.row.resfullname}}</div>
                  <div><strong>所在单位:</strong>{{scope.row.toorginfo}}</div>
                </div>
              </div>
              <div v-else>
                <el-empty description="暂无待办" :image-size="60"></el-empty>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="queryInfo.currentPage" :page-sizes="[10,20,50]" :page-size="queryInfo.pageSize"
          layout="prev,pager,next,jumper,sizes,total" :total="total" :disabled="!isLegel">
        </el-pagination>
      </el-col>
      <!-- 右侧 -->
      <el-col :span="5">
        <div id="factoryTotalRate" class="chart"></div>
        <div id="departmentTotalRate" class="chart"></div>
        <div id="top10" style="height: 380px;border: 1px solid #409EFF;margin: 10px;position: relative;">
          <dv-loading style="width:100%;height: 380px;position:absolute;top:0;left:0;" v-show="isloading">Loading...
          </dv-loading>
          <el-tooltip placement="top" trigger="hover" effect="light" width="400">
            <div slot="content">
              <p>统计说明:</p>
              <p>在所选时间范围内，统计各节点人员超时未处理问题数（1人同属流程多个节点时，同问题只算1次）。</p>
            </div>
            <div style="text-align: center !important;">
              <span class="el-icon-info"></span>
              <span style="font-weight: bold;font-size: 16px;">超时未处理数排名 Top10</span>
            </div>
          </el-tooltip>
          <div style="margin:10px;">
            <dv-scroll-board :config="scrollBoardConfig" style="width:100%;height:340px"></dv-scroll-board>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 各节点回复情况对话框 -->
    <el-dialog title="各节点回复情况" :visible.sync="dialogVisible" width="80%" :top="'10'">
      <el-row>
        <el-col :span="12">
          <el-timeline>
            <el-timeline-item placement="bottom">
              <h3><i class="el-icon-s-check"></i> 【流程主管】处理情况</h3>
              <el-card>
                <el-image v-if="commentList.lczgimageurl" style="width:48px;height:48px;"
                  :src="commentList.lczgimageurl" :preview-src-list="[commentList.lczgimageurl]">
                </el-image>
                <el-image v-else style="width:48px;height: 48px;" :src="'../images/person_blue.png'">
                </el-image>
                <p>{{commentList.lczgfullname || commentList.lczg_emp}}</p>
                <p>
                  <strong>处理意见:</strong>
                  <span v-if="commentList.lczgresult" style="color:red;">超时自动办理</span>
                  <span v-else>{{commentList.lczg_result}}</span>
                </p>
                <p>
                  <strong>办理日期:</strong>
                  <span v-if="commentList.lczgdate" style="color:red;">
                    <i class="el-icon-time"></i>{{commentList.lczgdate.replace('T',' ')}} (超时自动办理)
                  </span>
                  <span v-else>
                    <i class="el-icon-time" v-if="commentList.lczg_edit_date"></i> {{commentList.lczg_edit_date}}
                  </span>
                </p>
              </el-card>
            </el-timeline-item>

            <el-timeline-item placement="bottom">
              <h3><i class="el-icon-s-check"></i> 【处室】处理情况</h3>
              <el-card>
                <el-image v-if="commentList.chushiimageurl" style="width:48px;height:48px;"
                  :src="commentList.chushiimageurl" :preview-src-list="[commentList.chushiimageurl]">
                </el-image>
                <el-image v-else style="width:48px;height: 48px;" :src="'../images/person_blue.png'">
                </el-image>
                <p>{{commentList.chushifullname}}</p>
                <p>
                  <strong>处理意见:</strong>
                  <span v-if="commentList.chushiresult" style="color:red;">超时自动办理</span>
                  <span v-else>{{commentList.cs_result}}</span>
                </p>
                <p>
                  <strong>办理日期:</strong>
                  <span v-if="commentList.chushidate" style="color:red;">
                    <i class="el-icon-time"></i>{{commentList.chushidate.replace('T',' ')}} (超时自动办理)
                  </span>
                  <span v-else>
                    <i class="el-icon-time" v-if="commentList.cs_edit_date"></i> {{commentList.cs_edit_date}}
                  </span>
                </p>
              </el-card>
            </el-timeline-item>

            <el-timeline-item placement="bottom">
              <h3><i class="el-icon-s-check"></i> 【副厂级】处理情况</h3>
              <el-card>
                <el-image v-if="commentList.fcjimageurl" style="width:48px;height:48px;" :src="commentList.fcjimageurl"
                  :preview-src-list="[commentList.fcjimageurl]">
                </el-image>
                <el-image v-else style="width:48px;height: 48px;" :src="'../images/person_blue.png'">
                </el-image>
                <p>{{commentList.fcjfullname}}</p>
                <p>
                  <strong>处理意见:</strong>
                  <span v-if="commentList.fcjresult" style="color:red;">超时自动办理</span>
                  <span v-else>{{commentList.fcj_result}}</span>
                </p>
                <p>
                  <strong>办理日期:</strong>
                  <span v-if="commentList.fcjdate" style="color:red;">
                    <i class="el-icon-time"></i>{{commentList.fcjdate.replace('T',' ')}} (超时自动办理)
                  </span>
                  <span v-else>
                    <i class="el-icon-time" v-if="commentList.fcj_edit_date"></i> {{commentList.fcj_edit_date}}
                  </span>
                </p>
              </el-card>
            </el-timeline-item>

            <el-timeline-item placement="bottom">
              <h3><i class="el-icon-s-check"></i> 【厂级】处理情况</h3>
              <el-card>
                <el-image v-if="commentList.cjimageurl" style="width:48px;height:48px;" :src="commentList.cjimageurl"
                  :preview-src-list="[commentList.cjimageurl]">
                </el-image>
                <el-image v-else style="width:48px;height: 48px;" :src="'../images/person_blue.png'">
                </el-image>
                <p>{{commentList.cjfullname}}</p>
                <p>
                  <strong>处理意见:</strong>
                  <span v-if="commentList.cjresult" style="color:red;">超时自动办理</span>
                  <span v-else>{{commentList.cj_result}}</span>
                </p>
                <p>
                  <strong>办理日期:</strong>
                  <span v-if="commentList.cjdate" style="color:red;">
                    <i class="el-icon-time"></i>{{commentList.cjdate.replace('T',' ')}} (超时自动办理)
                  </span>
                  <span v-else>
                    <i class="el-icon-time" v-if="commentList.cj_edit_date"></i> {{commentList.cj_edit_date}}
                  </span>
                </p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-col>
        <el-col :span="12">
          <el-timeline>
            <el-timeline-item placement="bottom">
              <h3><i class="el-icon-s-check"></i> 【副部级】处理情况</h3>
              <el-card>
                <el-image v-if="commentList.fbzimageurl" style="width:48px;height:48px;" :src="commentList.fbzimageurl"
                  :preview-src-list="[commentList.fbzimageurl]">
                </el-image>
                <el-image v-else style="width:48px;height: 48px;" :src="'../images/person_blue.png'">
                </el-image>
                <p>{{commentList.fbzfullname}}</p>
                <p>
                  <strong>处理意见:</strong>
                  <span v-if="commentList.fbzresult" style="color:red;">超时自动办理</span>
                  <span v-else>{{commentList.fbz_result}}</span>
                </p>
                <p>
                  <strong>办理日期:</strong>
                  <span v-if="commentList.fbzdate" style="color:red;">
                    <i class="el-icon-time"></i>{{commentList.fbzdate.replace('T',' ')}} (超时自动办理)
                  </span>
                  <span v-else>
                    <i class="el-icon-time" v-if="commentList.fbz_edit_date"></i> {{commentList.fbz_edit_date}}
                  </span>
                </p>
              </el-card>
            </el-timeline-item>

            <el-timeline-item placement="bottom">
              <h3><i class="el-icon-s-check"></i> 【正部级】处理情况</h3>
              <el-card>
                <el-image v-if="commentList.bzimageurl" style="width:48px;height:48px;" :src="commentList.bzimageurl"
                  :preview-src-list="[commentList.bzimageurl]">
                </el-image>
                <el-image v-else style="width:48px;height: 48px;" :src="'../images/person_blue.png'">
                </el-image>
                <p>{{commentList.bzfullname}}</p>
                <p>
                  <strong>处理意见:</strong>
                  <span v-if="commentList.bzresult" style="color:red;">超时自动办理</span>
                  <span v-else>{{commentList.bz_result}}</span>
                </p>
                <p>
                  <strong>办理日期:</strong>
                  <span v-if="commentList.bzdate" style="color:red;">
                    <i class="el-icon-time"></i>{{commentList.bzdate.replace('T',' ')}} (超时自动办理)
                  </span>
                  <span v-else>
                    <i class="el-icon-time" v-if="commentList.bz_edit_date"></i> {{commentList.bz_edit_date}}
                  </span>
                </p>
              </el-card>
            </el-timeline-item>

            <el-timeline-item placement="bottom">
              <h3><i class="el-icon-s-check"></i> 【生产部】处理情况</h3>
              <el-card>
                <el-image v-if="commentList.fzjlimageurl" style="width:48px;height:48px;"
                  :src="commentList.fzjlimageurl" :preview-src-list="[commentList.fzjlimageurl]">
                </el-image>
                <el-image v-else style="width:48px;height: 48px;" :src="'../images/person_blue.png'">
                </el-image>
                <p>{{commentList.fzjlfullname}}</p>
                <p>
                  <strong>处理意见:</strong>
                  <span v-if="commentList.fzjlresult" style="color:red;">超时自动办理</span>
                  <span v-else>{{commentList.fzjl_result}}</span>
                </p>
                <p>
                  <strong>办理日期:</strong>
                  <span v-if="commentList.fzjldate" style="color:red;">
                    <i class="el-icon-time"></i>{{commentList.fzjldate.replace('T',' ')}} (超时自动办理)
                  </span>
                  <span v-else>
                    <i class="el-icon-time" v-if="commentList.fzjl_edit_date"></i> {{commentList.fzjl_edit_date}}
                  </span>
                </p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item placement="bottom">
              <h3><i class="el-icon-s-check"></i> 【公司领导】处理情况</h3>
              <el-card>
                <el-image v-if="commentList.bossimageurl" style="width:48px;height:48px;"
                  :src="commentList.bossimageurl" :preview-src-list="[commentList.bossimageurl]">
                </el-image>
                <el-image v-else style="width:48px;height: 48px;" :src="'../images/person_blue.png'">
                </el-image>
                <p>{{commentList.bossfullname}}</p>
                <p>
                  <strong>处理意见:</strong>
                  <span v-if="commentList.bossresult" style="color:red;">超时自动办理</span>
                  <span v-else>{{commentList.boss_result}}</span>
                </p>
                <p>
                  <strong>办理日期:</strong>
                  <span v-if="commentList.bossdate" style="color:red;">
                    <i class="el-icon-time"></i>{{commentList.bossdate.replace('T',' ')}} (超时自动办理)
                  </span>
                  <span v-else>
                    <i class="el-icon-time" v-if="commentList.boss_edit_date"></i> {{commentList.boss_edit_date}}
                  </span>
                </p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-col>
      </el-row>

      <span slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </span>
    </el-dialog>

    <!-- 各分厂问题及时回复率 -->
    <el-dialog :title="factoryDealRateTitle" :width="'98%'" :top="'10px'" :center="true"
      :visible.sync="factoryDealRateDialogVisiable" @opened="getFactoryRate">
      <div id="factoryDealRateChart" style="height: 760px;"></div>
    </el-dialog>

    <!-- 各分厂问题及时回复率明细 -->
    <el-dialog :title="factoryDealRate.title" :width="'98%'" :top="'10px'" :center="true"
      :visible.sync="factoryDealRate.dialogVisiable">
      <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
        element-loading-background="rgba(0,0,0,0.8)" :data="factoryDealRate.dataList" stripe border>
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column label="分厂" prop="factoryname" width="115px" show-overflow-tooltip></el-table-column>
        <el-table-column label="提出人" prop="createuser" width="60" show-overflow-tooltip></el-table-column>
        <el-table-column label="提出时间" prop="createdate" width="100" :formatter="splitDate"></el-table-column>
        <el-table-column label="问题类型" prop="problemtype" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column label="问题描述" prop="problem_feedback_title" show-overflow-tooltip></el-table-column>
        <el-table-column label="流程主管意见" prop="lczg_result" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column label="处室意见" prop="cs_result" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column label="副厂级意见" prop="fcj_result" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column label="厂级意见" prop="cj_result" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column label="当前节点" prop="tasktitle" width="200" show-overflow-tooltip>
          <template slot-scope="scope" v-if="scope.row.tasktitle && !scope.row.tasktitle.includes('[流程通知]')">
            {{scope.row.tasktitle.split('【')[0]}}
          </template>
        </el-table-column>
        <el-table-column label="待办人" prop="currentuser" width="80" show-overflow-tooltip></el-table-column>
        <el-table-column label="是否关闭" prop="problem_status" width="80" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag :type="scope.row.problem_status === '已关闭' ? 'info' : ''">{{scope.row.problem_status}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status" width="80" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '已响应' ? 'success' : 'danger'">{{scope.row.status}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100px;">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-download" size="mini" @click="exportFactoryRateDetail">
              导出
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination @current-change="handleFactoryDealRateDetailsCurrentChange"
        :current-page="factoryDealRate.queryInfo.currentPage" :page-sizes="[factoryDealRate.queryInfo.pageSize]"
        :page-size="factoryDealRate.queryInfo.pageSize" layout="prev,pager,next,jumper,sizes,total"
        :total="factoryDealRate.total">
      </el-pagination>
    </el-dialog>

    <!-- 各职能部门问题回复率 -->
    <el-dialog :title="departmentDealRateTitle" :width="'98%'" :top="'10px'" :center="true"
      :visible.sync="departmentDealRateDialogVisiable" @opened="getDepartmentRate">
      <div id="departmentDealRateChart" style="height: 760px;"></div>
    </el-dialog>

    <!-- 各职能部门问题明细 -->
    <el-dialog :title="departmentDealRate.title" :width="'98%'" :top="'10px'" :center="true"
      :visible.sync="departmentDealRate.dialogVisiable">
      <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
        element-loading-background="rgba(0,0,0,0.8)" :data="departmentDealRate.dataList" stripe border>
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column label="职能部门" prop="departmentname" width="115" show-overflow-tooltip></el-table-column>
        <el-table-column label="提出人" prop="createuser" width="60" show-overflow-tooltip></el-table-column>
        <el-table-column label="提出分厂" prop="factoryname" width="115" show-overflow-tooltip></el-table-column>
        <el-table-column label="提出时间" prop="createdate" width="100" :formatter="splitDate"></el-table-column>
        <el-table-column label="问题类型" prop="problemtype" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column label="问题描述" prop="problem_feedback_title" show-overflow-tooltip></el-table-column>
        <el-table-column label="副部级意见" prop="fbz_result" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column label="正部级意见" prop="bz_result" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column label="当前节点" prop="tasktitle" width="200" show-overflow-tooltip>
          <template slot-scope="scope" v-if="scope.row.tasktitle && !scope.row.tasktitle.includes('[流程通知]')">
            {{scope.row.tasktitle.split('【')[0]}}
          </template>
        </el-table-column>
        <el-table-column label="待办人" prop="currentuser" width="80" show-overflow-tooltip></el-table-column>
        <el-table-column label="是否关闭" prop="problem_status" width="80" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag :type="scope.row.problem_status === '已关闭' ? 'info' : ''">{{scope.row.problem_status}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status" width="80" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '已响应' ? 'success' : 'danger'">{{scope.row.status}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100px;">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-download" size="mini" @click="exportDepartmentRateDetail">
              导出
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination @current-change="handleDepartmentDealRateDetailsCurrentChange"
        :current-page="departmentDealRate.queryInfo.currentPage" :page-sizes="[departmentDealRate.queryInfo.pageSize]"
        :page-size="departmentDealRate.queryInfo.pageSize" layout="prev,pager,next,jumper,sizes,total"
        :total="departmentDealRate.total">
      </el-pagination>
    </el-dialog>
  </div>
  <script src="../Scripts/echarts/echarts-5.4.0.min.js"></script>
  <script type="module">
    import { exportExcelData, getParams, fetchSuggestion } from '../Scripts/hooks/useCommonMethod.js'
    import { prevWeek, thisWeek, nextWeek, prevMonth, thisMonth, nextMonth } from '../Scripts/hooks/useDateShortCut.js'
    import { getUserInfo } from '../Scripts/hooks/fetchAPI.js'
    import { splitDate } from '../Scripts/hooks/format.js'
    const app = new Vue({
      el: '#app',
      data: {
        splitDate,
        loading: false,
        loadingText: '数据加载中...',
        currentTime: '',
        url: "http://10.15.7.194:8088/portal/ssologin_mes_feedback_new2.jsp?url=",
        taskBaseUrl: 'http://10.15.7.194:8088/portal/r/or?cmd=CLIENT_BPM_FORM_MAIN_PAGE_OPEN&openState=1&displayToolbar=true&oauthName=wps',
        factoryList: [],
        workcenterList: [],//所有工区
        searchWorkcenterList: [],
        employeeid: '',
        isRefresh: true,//是否定时刷新
        refreshTime: 60000,//定时刷新时间（分钟）
        timer: null,//定时刷新定时器对象
        queryInfo: {
          fromOrg: '',
          toOrg: '',
          self: false,
          feedbackType: '',
          status: '处理中',
          createdate: '',
          createuser: '', //提出人
          dealperson: '',//待办人
          currentPage: 1,//当前页
          pageSize: 10//每页显示条数
        },
        isLegel: true,
        dataList: [],//人员信息
        orginazition: [],
        dialogVisible: false,
        commentList: [],
        total: 0,
        pageCount: 1, // 总页数
        autoFlush: true,// 是否自动刷新
        interval: 0, // 自动刷新间隔时间
        scrollBoardConfig: {},
        isloading: false,
        top10IsEmpty: false,
        rules: {
          createdate: [{ required: true, message: '提出时间不能为空', trigger: 'change' }]
        },
        factoryDealRateDialogVisiable: false,
        factoryDealRateTitle: '各分厂问题及时回复率',
        departmentDealRateDialogVisiable: false,
        departmentDealRateTitle: '各职能部门问题及时回复率',
        // 各分厂问题及时回复率明细
        factoryDealRate: {
          dialogVisiable: false,
          queryInfo: {
            status: '',
            title: '',
            factoryname: '',
            currentPage: 1,//当前页
            pageSize: 12//每页显示条数
          },
          dataList: [],
          total: 0,
          title: ''
        },
        // 职能部门问题及时回复率明细
        departmentDealRate: {
          dialogVisiable: false,
          queryInfo: {
            status: '',
            title: '',
            factoryname: '',
            currentPage: 1,//当前页
            pageSize: 12//每页显示条数
          },
          dataList: [],
          total: 0,
          title: ''
        },
        loadingConfig: { text: '数据查询中...', effect: 'whirling', maskColor: 'transparent', textColor: '#fff', color: '#66b1ff' },
        pickerOptions: { shortcuts: [prevWeek, thisWeek, nextWeek, prevMonth, thisMonth, nextMonth] }
      },
      methods: {
        searchFullnameAsync(value, callback) {
          fetchSuggestion({ actionName: 'getBpmUserAsync', name: 'fullname', value, callback, triggerLength: 2 });
        },
        //查询数据
        async getData() {
          this.loading = true;
          const { data: { data, meta, total } } = await axios.post('../handler/board/MESFeedBackTaskBoard.ashx?action=getData', {
            ...this.queryInfo,
            employeeid: this.employeeid,
            type: 'getData'
          });
          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.dataList = data;
          this.total = total;
          this.pageCount = Math.ceil(total / this.queryInfo.pageSize);
        },
        async showEditDialog(id) {
          this.dialogVisible = true;
          const { data: { data, meta, total } } = await axios.post('../handler/board/MESFeedBackTaskBoard.ashx?action=getAllComment', {
            id: id, type: 'getAllComment'
          })
          this.commentList = data[0];
        },
        // 导出excel
        async getExportExcel() {
          const config = {
            url: '../handler/board/MESFeedBackTaskBoard.ashx?action=getExportExcel',
            data: { type: 'getExportExcel', employeeid: this.employeeid, ...this.queryInfo }
          }
          exportExcelData(config, this);
        },
        // 获取组织结构
        async getOrginazition(callback) {
          const { data: { data, meta, total } } = await axios.post('../handler/report/FeedbackTypeMaint.ashx?action=getOrginazition', {
            type: 'getOrginazition'
          })
          this.orginazition = data;

          if (callback) {
            callback(data);
          }
        },
        async validateUser() {
          const { data: { data, meta, total } } = await axios.post('../handler/report/ReportPageMaint.ashx?action=validateUser', {
            type: 'validate',
            employeeid: this.employeeid
          });
          if (meta.status !== 200) { this.isLegel = false; }
        },
        // 分厂问题总及时响应率(总)
        async getFactoryTotalRate() {
          echarts.dispose(document.getElementById("factoryTotalRate"));
          let chart = echarts.init(document.getElementById('factoryTotalRate'));
          chart.showLoading(this.loadingConfig);
          const { data: { data, meta, total } } = await axios.post('../handler/board/MESFeedBackTaskBoard.ashx?action=getFactoryTotalRate', {
            type: 'getFactoryTotalRate',
            employeeid: this.employeeid,
            ...this.queryInfo
          })
          chart.hideLoading();
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          echarts.dispose(document.getElementById("factoryTotalRate"));
          chart = echarts.init(document.getElementById('factoryTotalRate'));
          var option = {
            title: {
              text: '分厂问题及时响应率',
              left: 'center'
            },
            legend: {
              x: 'center',
              y: 'bottom'
            },
            tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            color: ['#1E9FFF', '#a9a9a9'],
            series: [{
              name: '月度完成情况',
              type: 'pie',
              radius: ['30%', '45%'],
              center: ['50%', '50%'],
              label: {
                show: true,
                position: 'outside',
                formatter: '{d}%',
                textStyle: {
                  fontSize: '14',
                  fontWeight: 'bold',
                  color: '#000'
                }
              },
              data: [
                { value: data[0]["dealqty"], name: '已响应' },
                { value: data[0]["notdealqty"], name: '未响应' }
              ]
            }]
          };
          chart.setOption(option);
          chart.on('click', (params) => {
            this.factoryDealRateDialogVisiable = true
          })
        },
        // 各分厂问题及时响应率(各分厂)
        async getFactoryRate() {
          echarts.dispose(document.getElementById("factoryDealRateChart"));
          let chart = echarts.init(document.getElementById('factoryDealRateChart'));
          chart.showLoading(this.loadingConfig);
          const { data: { data, meta, total } } = await axios.post('../handler/board/MESFeedBackTaskBoard.ashx?action=getFactoryRate', {
            type: 'getFactoryRate',
            employeeid: this.employeeid,
            ...this.queryInfo
          })
          chart.hideLoading();
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }
          echarts.dispose(document.getElementById("factoryDealRateChart"));
          chart = echarts.init(document.getElementById('factoryDealRateChart'));

          const arrFactoryname = [], arrTotal = [], arrNotDealQty = [], arrDealQty = [], arrDealRate = [];
          for (const i of data) {
            arrFactoryname.push(i.factoryname);
            arrTotal.push(i.total);
            arrNotDealQty.push(i.notdealqty);
            arrDealQty.push(i.dealqty);
            arrDealRate.push(i.dealrate);
          }

          let option = {
            grid: {
              left: '3%',
              right: '3%',
              bottom: '5%',
              containLabel: true
            },
            legend: {
              data: ['总数', '未响应', '已响应', '处理率'],
              x: 'left',
              y: 'top',
              textStyle: {
                fontSize: '12',
                fontWeight: 'bold',
                color: '#000'
              }
            },
            color: ['#00BFFF', '#f56c6c', '#67c23a', '#67c23a'],
            xAxis: [{
              type: 'category',
              data: arrFactoryname,
              axisTick: {
                alignWithLabel: true
              },
              axisLine: {
                lineStyle: {
                  color: '#000',
                  width: '2'
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#000',
                  fontSize: '14',
                  fontWeight: 'bold'
                }
              }
            }],
            yAxis: [{
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#000',
                  width: '2'
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#000',
                  fontSize: '12',
                  fontWeight: 'bold'
                }
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: '#999',
                  type: 'dashed'
                }
              }
            }, {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#000',
                  width: '2'
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#000',
                  fontSize: '12',
                  fontWeight: 'bold'
                }
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: '#999',
                  type: 'dashed'
                }
              }
            }],
            series: [{
              name: '总数',
              type: 'bar',
              barMaxWidth: 35,
              data: arrTotal,
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: 'top',
                    fontSize: '12',
                    fontWeight: 'bold',
                    formatter: '{c}'
                  },
                  barBorderRadius: [5, 5, 0, 0]
                }
              }
            }, {
              name: '未响应',
              type: 'bar',
              barMaxWidth: 35,
              data: arrNotDealQty,
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: 'top',
                    fontSize: '12',
                    fontWeight: 'bold',
                    formatter: '{c}'
                  },
                  barBorderRadius: [5, 5, 0, 0]
                }
              }
            }, {
              name: '已响应',
              type: 'bar',
              barMaxWidth: 35,
              data: arrDealQty,
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: 'top',
                    fontSize: '12',
                    fontWeight: 'bold',
                    formatter: '{c}'
                  },
                  barBorderRadius: [5, 5, 0, 0]
                }
              }
            }, {
              name: '处理率',
              type: 'line',
              data: arrDealRate,
              yAxisIndex: 1,
              symbolSize: 10,
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: 'top',
                    fontSize: '12',
                    fontWeight: 'bold',
                    formatter: '{c}%'
                  },
                  barBorderRadius: [5, 5, 0, 0]
                }
              }
            }]
          };
          chart.setOption(option);
          chart.on('click', (params) => {
            if (params.seriesName === '处理率') { return; }
            this.factoryDealRate.queryInfo.currentPage = 1;
            this.factoryDealRate.queryInfo.factoryname = params.name;
            this.factoryDealRate.queryInfo.status = params.seriesName;
            this.factoryDealRate.title = `${params.name}【${params.seriesName}】明细`;
            this.factoryDealRate.dialogVisiable = true;
            this.getFactoryRateDetail();
          })
        },
        // 各分厂问题及时响应率明细
        async getFactoryRateDetail() {
          this.loading = true;
          this.loadingText = '数据加载中...';
          const { data: { data, meta, total } } = await axios.post('../handler/board/MESFeedBackTaskBoard.ashx?action=getFactoryRateDetail', {
            type: 'getFactoryRateDetail',
            ...this.queryInfo,
            ...this.factoryDealRate.queryInfo
          })
          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.factoryDealRate.dataList = data;
          this.factoryDealRate.total = total
        },
        // 职能部门问题及时响应率(总)
        async getDepartmentTotalRate() {
          echarts.dispose(document.getElementById("departmentTotalRate"));
          let chart = echarts.init(document.getElementById('departmentTotalRate'));
          chart.showLoading(this.loadingConfig);
          const { data: { data, meta, total } } = await axios.post('../handler/board/MESFeedBackTaskBoard.ashx?action=getDepartmentTotalRate', {
            type: 'getDepartmentTotalRate',
            employeeid: this.employeeid,
            ...this.queryInfo
          })
          chart.hideLoading();
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }
          echarts.dispose(document.getElementById("departmentTotalRate"));
          chart = echarts.init(document.getElementById('departmentTotalRate'));
          var option = {
            title: {
              text: '职能部门问题及时响应率',
              left: 'center'
            },
            legend: {
              x: 'center',
              y: 'bottom'
            },
            tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            color: ['#1E9FFF', '#a9a9a9'],
            series: [{
              name: '月度完成情况',
              type: 'pie',
              radius: ['30%', '45%'],
              center: ['50%', '50%'],
              label: {
                show: true,
                position: 'outside',
                formatter: '{d}%',
                textStyle: {
                  fontSize: '14',
                  fontWeight: 'bold',
                  color: '#000'
                }
              },
              data: [
                { value: data[0]["dealqty"], name: '已响应' },
                { value: data[0]["notdealqty"], name: '未响应' }
              ]
            }]
          };
          chart.setOption(option);
          chart.on('click', (params) => {
            this.departmentDealRateDialogVisiable = true
          })
        },
        // 各职能部门问题及时响应率(各分厂)
        async getDepartmentRate() {
          echarts.dispose(document.getElementById("departmentDealRateChart"));
          let chart = echarts.init(document.getElementById('departmentDealRateChart'));
          chart.showLoading(this.loadingConfig);
          const { data: { data, meta, total } } = await axios.post('../handler/board/MESFeedBackTaskBoard.ashx?action=getDepartmentRate', {
            type: 'getDepartmentRate',
            employeeid: this.employeeid,
            ...this.queryInfo
          })
          chart.hideLoading()
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          echarts.dispose(document.getElementById("departmentDealRateChart"));
          chart = echarts.init(document.getElementById('departmentDealRateChart'));

          const arrFactoryname = [], arrTotal = [], arrNotDealQty = [], arrDealQty = [], arrDealRate = [];
          for (const i of data) {
            arrFactoryname.push(i.factoryname);
            arrTotal.push(i.total);
            arrNotDealQty.push(i.notdealqty);
            arrDealQty.push(i.dealqty);
            arrDealRate.push(i.dealrate);
          }

          let option = {
            grid: {
              left: '3%',
              right: '3%',
              bottom: '5%',
              containLabel: true
            },
            legend: {
              data: ['总数', '未响应', '已响应', '处理率'],
              x: 'left',
              y: 'top',
              textStyle: {
                fontSize: '12',
                fontWeight: 'bold',
                color: '#000'
              }
            },
            color: ['#00BFFF', '#f56c6c', '#67c23a', '#67c23a'],
            xAxis: [{
              type: 'category',
              data: arrFactoryname,
              axisTick: {
                alignWithLabel: true
              },
              axisLine: {
                lineStyle: {
                  color: '#000',
                  width: '2'
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#000',
                  fontSize: '14',
                  fontWeight: 'bold'
                }
              }
            }],
            yAxis: [{
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#000',
                  width: '2'
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#000',
                  fontSize: '12',
                  fontWeight: 'bold'
                }
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: '#999',
                  type: 'dashed'
                }
              }
            }, {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#000',
                  width: '2'
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#000',
                  fontSize: '12',
                  fontWeight: 'bold'
                }
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: '#999',
                  type: 'dashed'
                }
              }
            }],
            series: [{
              name: '总数',
              type: 'bar',
              barMaxWidth: 35,
              data: arrTotal,
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: 'top',
                    fontSize: '12',
                    fontWeight: 'bold',
                    formatter: '{c}'
                  },
                  barBorderRadius: [5, 5, 0, 0]
                }
              }
            }, {
              name: '未响应',
              type: 'bar',
              barMaxWidth: 35,
              data: arrNotDealQty,
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: 'top',
                    fontSize: '12',
                    fontWeight: 'bold',
                    formatter: '{c}'
                  },
                  barBorderRadius: [5, 5, 0, 0]
                }
              }
            }, {
              name: '已响应',
              type: 'bar',
              barMaxWidth: 35,
              data: arrDealQty,
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: 'top',
                    fontSize: '12',
                    fontWeight: 'bold',
                    formatter: '{c}'
                  },
                  barBorderRadius: [5, 5, 0, 0]
                }
              }
            }, {
              name: '处理率',
              type: 'line',
              data: arrDealRate,
              yAxisIndex: 1,
              symbolSize: 10,
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: 'top',
                    fontSize: '12',
                    fontWeight: 'bold',
                    formatter: '{c}%'
                  },
                  barBorderRadius: [5, 5, 0, 0]
                }
              }
            }]
          };
          chart.setOption(option);
          chart.on('click', (params) => {
            if (params.seriesName === '处理率') { return; }
            this.departmentDealRate.queryInfo.currentPage = 1;
            this.departmentDealRate.queryInfo.factoryname = params.name;
            this.departmentDealRate.queryInfo.status = params.seriesName;
            this.departmentDealRate.title = `${params.name}【${params.seriesName}】明细`;
            this.departmentDealRate.dialogVisiable = true;
            this.getDepartmentRateDetail();
          })
        },
        // 职能部门问题明细
        async getDepartmentRateDetail() {
          this.loading = true;
          this.loadingText = '数据加载中...';
          const { data: { data, meta, total } } = await axios.post('../handler/board/MESFeedBackTaskBoard.ashx?action=getDepartmentRateDetail', {
            type: 'getDepartmentRateDetail',
            ...this.queryInfo,
            ...this.departmentDealRate.queryInfo
          })
          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.departmentDealRate.dataList = data;
          this.departmentDealRate.total = total
        },
        // 流程未及时响应后10名
        async getLast10Data() {
          this.isloading = true;
          const { data: { data, meta, total } } = await axios.post('../handler/board/MESFeedBackTaskBoard.ashx?action=getLast10Data', {
            type: 'getLast10Data',
            ...this.queryInfo
          })
          this.isloading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          let scrollBoardData = [];
          data.forEach((item, index) => {
            if (index <= 9) {
              scrollBoardData.push([`${item.username}`, `${item.notdealqty}条`, `${item.dealrate}%`]);
            }
          });
          this.scrollBoardConfig = {
            data: scrollBoardData,
            header: ['姓名', '超时未处理', '响应率'],
            columnWidth: [45, 70, 120],
            waitTime: 1000,
            align: ['left', 'left', 'center', 'right'],
            index: true,// 显示行号
            rowNum: 5,// 每页10行
            carousel: 'single',// 'single|page'
            headerBGC: '#409EFF',// 表头行背景色
            oddRowBGC: '#fff',// 奇数行背景色
            evenRowBGC: '#eee',// 偶数行背景色 }
          }
        },
        handlerBtnSearch() {
          this.$refs['queryInfoRef'].validate((valid) => {
            if (!valid) {
              return this.$message.error('必填项不能为空');
            } else {
              this.queryInfo.currentPage = 1;
              this.getData();
              this.getFactoryTotalRate();
              this.getDepartmentTotalRate();
              this.getLast10Data();
            }
          })
        },
        exportFactoryRateDetail() {
          const config = {
            url: '../handler/board/MESFeedBackTaskBoard.ashx?action=exportFactoryRateDetail',
            data: {
              type: 'exportFactoryRateDetail',
              ...this.queryInfo,
              ...this.factoryDealRate.queryInfo
            }
          }
          exportExcelData(config, this);
        },
        exportDepartmentRateDetail() {
          const config = {
            url: '../handler/board/MESFeedBackTaskBoard.ashx?action=exportDepartmentRateDetail',
            data: {
              type: 'exportDepartmentRateDetail',
              ...this.queryInfo,
              ...this.departmentDealRate.queryInfo
            }
          }
          exportExcelData(config, this);
        },
        //监听 页码值 改变的事件
        handleCurrentChange(newPage) {
          this.queryInfo.currentPage = newPage;
          this.getData();
        },
        //监听 pagesize 改变的事件
        handleSizeChange(newSize) {
          this.queryInfo.pageSize = newSize;
          this.getData();
        },
        handleFactoryDealRateDetailsCurrentChange(newPage) {
          this.factoryDealRate.queryInfo.currentPage = newPage;
          this.getFactoryRateDetail();
        },
        handleDepartmentDealRateDetailsCurrentChange(newPage) {
          this.departmentDealRate.queryInfo.currentPage = newPage;
          this.getDepartmentRateDetail();
        },
        //进度条文字设置
        format(percentage) { return percentage + "%" },
        // 设置进度条颜色
        setProgressClor(row) {
          if (row.problem_status === '已关闭') {
            return 'green';
          } else {
            if (row.tasktitle && row.tasktitle.includes('流程主管人员接收问题')) {
              return "red";
            } else {
              return "orange";
            }
          }
        },
        // 创建定时刷新任务
        createTimer() {
          if (this.timer) {
            this.createTimer();
            this.timer = null;
          }

          this.timer = setInterval(() => {
            let currentPage = this.queryInfo.currentPage + 1;
            this.queryInfo.currentPage = this.queryInfo.currentPage < this.pageCount ? currentPage : 1;
            this.getData();
          }, this.refreshTime);
        },
        // 取消定时刷新任务
        clearTimer() {
          clearInterval(this.timer);
        }
      },
      async mounted() {
        let incrementNumber = () => {
          setTimeout(incrementNumber, 500);
          this.currentTime = dayjs().format('YYYY年MM月DD日  HH:mm:ss');
        }
        setTimeout(incrementNumber, 500);
        const start = dayjs().startOf('month').format('YYYY-MM-DD');
        const end = dayjs().endOf('month').format('YYYY-MM-DD');
        this.queryInfo.createdate = [start, end];
        if (getParams("uid") == "") {
          this.isLegel = false;
          return this.$notify.error('该用户无权使用该功能');
        }
        this.employeeid = getParams("uid");
        this.userInfo = await getUserInfo({ employeeid: this.employeeid, isMapping: '是' });

        this.getOrginazition(data => {
          let ufactoryInfo = this.orginazition.filter(({ value, label }) => {
            return label == this.userInfo.factoryname;
          });
          if (ufactoryInfo.length > 0) this.queryInfo.fromOrg = [ufactoryInfo[0].value];
          this.getData();
        });

        this.getFactoryTotalRate();
        this.getDepartmentTotalRate();
        this.getLast10Data();

        // 判断如果定时刷新开启时，自动刷新页面数据。
        if (this.isRefresh) {
          this.createTimer();
        }
      },
      watch: {
        isRefresh(val) {
          if (val) {
            if (this.timer) return;

            this.createTimer();
          } else {
            this.clearTimer();
          }
        }
      }
    })
  </script>
</body>

</html>